<template>
	<view>
<!-- 		<u-navbar  title="班级管理" :is-back="false"   titleColor="#000">
		</u-navbar> -->
		<view class="top">
				<view class="title">
					班级管理
				</view>
				<view class="list">
					<view class="list-l">
						<image class="list-img" src="/static/icon/banji_list.png" mode="aspectFit"></image>
						<text class="list-text"  @click="nianjipickerShow=true">{{keywordgrade}}</text>
						<u-icon name="arrow-down-fill" color="#fff" size="25" @click="nianjipickerShow=true"></u-icon>
					</view>
					<image class="list-r-img" src="/static/icon/banji_add.png" mode="aspectFit"  @click="showbanjifun"></image>
				</view>
		</view>
	    
		<view class="content">
			<view class="content-item" v-for="(item,index) in banjiList" :key="index">
				<view class="item-l">
					<view class="item-title item-beweet">
						{{item.banji_name}}
						<view class="delete-banji">
							<u-icon name="edit-pen-fill" @click="schoolbanjiupdate(index)" style="margin-right: 10rpx;" class="" color="#2979ff" size="30"></u-icon>
							
							<u-icon name="trash-fill" @click="deleteshow  = true; currentBanjiIndex = index"  class="" color="#2979ff" size="30"></u-icon>
						</view>
					</view>
					<view class="item-stu item-beweet">
						<view class="studis">
							<image src="/static/icon/banji_title.png" class="item-img" mode="aspectFit"></image>
							<view class="item-stu-s">
								学生总数：{{item.stu_num}}人
							</view>
						</view>

						<view class="r-teacher" >
							<!-- <text v-if="item.realname">{{item.realname}}</text> -->
							<text  @click="feipeiTeacher(index)">分配老师</text>
						</view>
					</view>
					<view class="item-stu">
						<image src="/static/icon/banji_li.png"  class="item-img" mode="aspectFit"></image>
						<view class="item-stu-s">
							<text @click="goPage('/pages/school/stulist?banji_id='+item.id)">学生列表</text>
						</view>
					</view>
					<view class="item-stu " style="align-items:flex-start;">
						<image src="/static/icon/banji_li.png"  class="item-img" style="flex-shrink: 0;margin-top: 10rpx;" mode="aspectFit"></image>
						<view class="item-stu-s">
							老师：<u-tag class="tagteacher" v-for="(user,user_index) in item.teachers_arr" :key="user_index" :text="user.realname" color="#E89C38" mode="plain" border-color="#E89C38" close-color="#E89C38" :closeable="true" @close="teacherDelete(index,user_index)" />
						</view>
					</view>
				</view>	
				<!-- <view class="item-r" >
					
				
				</view> -->
			</view>
		</view>		

		<!-- 删除确认弹框 -->
		<u-modal v-model="deleteshow" @confirm="banjidelete" :show-cancel-button="true" :show-title="false" content="确定删除吗？"></u-modal>
		<!-- 新建班级 -->
		<u-popup v-model="showbanji" mode="center" :closeable="true" border-radius="10" width="90%" height="auto">
			<view class="title-add">
				{{showtitle}}
			</view>
			<view class="showbanji">
				<view class="form-item">
					<view class="form-item-label">
						<image src="/static/icon/banji_nianji.png" class="form-img" mode="widthFix"></image>
						<view class="form-item-title">所属年级</view>
					</view>
					<u-input v-model="banji.nianji_name" placeholder="请输入" input-align="right"  type="select" :select-open="nianjipickerShow"
						@click="nianjipickerShow=true" />
				</view>
				<view class="form-item">
					<view class="form-item-label">
						<image src="/static/icon/banji_name.png" class="form-img" mode="widthFix"></image>
						<view class="form-item-title">班级名称</view>
					</view>
					<u-input  placeholder="请输入" input-align="right" v-model="banji.banji_name" />
				</view>
				<u-button @click="submitbanji" class="submitbanji">保存</u-button>
			</view>
		</u-popup>
		
		

		<u-select mode="single-column" value-name="id" label-name="nianji_name" v-model="nianjipickerShow"
			:list="candidates" @confirm="confirmniaji"></u-select>
			
		<!-- 老师搜索弹框 -->
<!-- 		<u-popup v-model="teachershow" mode="bottom">
			<view class="search">
				<u-search placeholder="姓名" v-model="keyword" @search="search" :show-action="false"></u-search>
				<view class="searchheghti">
					<view class="search-con" v-for="(item,index) in teacherlist" :key="index">
						<view class="search-name">
							{{item.realname}}
						</view>
						<view class="search-icon">
							<u-icon label="" color="#2979ff" @click="teacherselectConfirm(index)" size="35"
								name="plus-circle-fill"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup> -->

		<u-popup v-model="teachershow" mode="center" :closeable="true" border-radius="10" width="90%" height="auto">
			<view style="overflow: hidden;">
				<view class="title-add">
					分配老师
				</view>
				<view class="showbanji">
					<u-search height="70" color="#B9B9B9" bg-color="#F0F0F0" margin="0rpx 18rpx 20rpx" search-icon-color="#B9B9B9" placeholder-color="#B9B9B9" placeholder="请输入您所查询的老师" v-model="keyword" @search="search" :show-action="false"></u-search>
					<view class="teacherbody">
						<view class="teacherlist" v-for="(item,index) in teacherlist" :key="index">
							<view class="showbanji-l">
								   <u-image width="61rpx" height="61rpx" :src="baseurl+item.avatar" shape="circle"></u-image>
								   <view class="showbanji-l-title">
										{{item.realname}}
								   </view>
							</view>
							<view  :class="{'showbanji-r':true,'hover':teacherSelectIndex === (index)}" @click="teacherselect(index)">
									<text>分配</text>
							</view>
						<!-- 	<view v-else class="showbanji-r-yifen">
								<u-icon  name="checkbox-mark" color="#E48A15" size="25"></u-icon> 已分配
							</view> -->
						</view>
					</view>
					<u-button @click="submitbanji" class="submitbanji">确认分配</u-button>
				</view>	
			</view>
		</u-popup>	
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				baseurl: '',
				keyword: "", //搜索
				keywordgrade: "班级列表",
				candidates: [{
						id: "1",
						nianji_name: "一年级",
					},
					{
						id: "2",
						nianji_name: "二年级",
					},
					{
						id: "3",
						nianji_name: "三年级",
					},
					{
						id: "4",
						nianji_name: "四年级",
					},
					{
						id: "5",
						nianji_name: "五年级",
					},
					{
						id: "6",
						nianji_name: "六年级",
					}
				],
				banjiList: [],
				showbanji: false,
				banji: {
					nianji_name: '',
					nianji_id: "",
					banji_name: '',
					user_ids: '',
					realname: ""
				},
				showtitle:"新建班级",
				currentBanjiIndex:0,  //当前选中的班级
				deleteshow:false,
				teacherlist: [],
				nianjipickerShow: false,
				teachershow: false,
				teacherSelectIndex:'',
			}
		},
		onLoad() {
			this.baseurl = this.$u.http.config.baseUrl
			this.search(); //老师列表
			this.banjilistff();
		},
		onReady() {

		},
		methods: {
			//修改班级
			schoolbanjiupdate(index){
				let banjiindex = this.banjiList[index]
				let nianji_name = ""
				 this.candidates.forEach((item)=>{
					if(item.id == banjiindex.nianji_id){
						nianji_name = item.nianji_name
					}
				});
				
				
				let banji = {
					nianji_name: nianji_name,
					banji_name:banjiindex.banji_name,
					nianji_id:banjiindex.nianji_id,
					id:banjiindex.id
				}
				this.banji = banji
				this.showbanji = true	
				this.showtitle = "修改班级";
			},
			//删除老师
			teacherDelete(index,user_index){
				let banji = this.banjiList[index]
				let teacher  = banji["teachers_arr"][user_index]
				this.banji = banji
				//删除老师
				let banjiuser_ids_arr = this.banji.user_ids.split(",");
				let banjiuser_index = banjiuser_ids_arr.indexOf(teacher.id); 
				banjiuser_ids_arr.splice(banjiuser_index, 1); 
				this.banji.user_ids = banjiuser_ids_arr.join();	
				//
				this.submitbanji()
			},
			//删除班级
			banjidelete(){
				let index = this.currentBanjiIndex
				let banji  = this.banjiList[index]
				
				this.$u.post('/api/school/banjiDelete', {
					ids: banji.id
				}).then(res => {
					this.$u.toast("删除成功");
					this.banjilistff();
				});
			},
			showbanjifun(){
			    this.showbanji = true
				this.showtitle = "创建班级";
				this.banji= {
					nianji_name: '',
					nianji_id: "",
					banji_name: '',
					user_ids: '',
					realname: ""
				}
			},
			//
			search() {
				//老师
				this.$u.post('/api/member/teacherlist', {
					keyword: this.keyword
				}).then(res => {

					this.teacherlist = res;
				});
			},
			//选择年级 
			confirmniaji(e) {
				if (this.showbanji) {
					this.banji.nianji_id = e[0].value
					this.banji.nianji_name = e[0].label
				} else {
					this.keywordgrade = e[0].label;
					this.banjilistff(e[0].value);
				}

			},
			//班级列表
			banjilistff(nianji_id = 0) {
				this.$u.post('/api/school/schoolBanjilist', {
					nianji_id: nianji_id
				}).then(res => {
					this.banjiList = res
				});
			},
			
			submitbanji() {
				let banji = this.banji;

				if (banji.id) {
					//修改老师
					// if (!banji.user_ids) {
					// 	this.$u.toast("请选择老师");
					// 	return false;
					// }
					if (!banji.id) {
						this.$u.toast("班级id不存在");
						return false;
					}
					
					//修改
					this.$u.post('/api/school/schoolBanjiUpdate', {
						banji: this.banji
					}).then(res => {
						this.$u.toast("成功");
						this.showbanji = false;
						this.teachershow = false;
						this.banjilistff();
					});

				} else {
					if (!banji.nianji_name) {
						this.$u.toast("请选择年级");
						return false;
					}
					if (!banji.banji_name) {
						this.$u.toast("请填写班级名称");
						return false;
					}

					//添加
					this.$u.post('/api/school/schoolBanjiAdd', {
						banji: this.banji
					}).then(res => {
						this.$u.toast("成功");
						this.showbanji = false;
						this.banjilistff();
					});
				}
				//


			},
			goPage(url){
				setTimeout(()=>{
					uni.navigateTo({
					    url: url
					});
				},500)
			},
			//老师选择
			teacherselectConfirm(index) {
				let item = this.teacherlist[index];
				this.banji.realname = item.realname
				this.banji.user_ids = item.id
				this.teachershow = false
			},
			feipeiTeacher(index) {
				this.teacherSelectIndex = "";
				let banjiindex = this.banjiList[index];
				this.banji = banjiindex
				this.teachershow = true
			},
			//选中老师
			teacherselect(index){
				this.teacherSelectIndex = index;
				let user_ids =  this.teacherlist[index].id
				
				let banjiuser_ids_arr = this.banji.user_ids.split(",");
			    if(banjiuser_ids_arr.indexOf(user_ids) == -1){
					banjiuser_ids_arr.push(user_ids)
					this.banji.user_ids = banjiuser_ids_arr.join();
				}	
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F8F8F7;
		overflow: hidden;
	}
	.top {
		width: 100%;
		height: 330rpx;
		position: relative;
		overflow: hidden;
		z-index: 1;
		.title{
			color: #fff;
			font-size: 40rpx;
			font-weight: 500;
			text-align: center;
			margin: 50rpx 0 0;
		}
		.list{
			display: flex;
			justify-content: space-between;
			margin: 40rpx 40rpx 0;
			align-items: center;
			.list-l{
				display: flex;
				align-items: center;
				overflow: hidden;
				.list-img{
					width: 38rpx;
					height: 38rpx;
				}
				.list-text{
					color: #fff;
					padding-left:14rpx;
					font-size: 40rpx;
					font-weight: 500;
					padding-right: 14rpx;
				}
				
			}
			.list-r-img{
				width: 38rpx;
				height: 38rpx;
			}
		}
		:after {
			position: absolute;
			left: -20%;
			top: 0;
			width: 140%; 
			height: 330rpx;
			z-index: -1;
			content: '';
			border-radius: 0 0 50% 50%;
			background: #135BF5;
		}
	}


    .content{
		position: relative;
		top:-80rpx;
		z-index: 2;
		.content-item{
			margin: 0 40rpx 32rpx;
			background-color: #fff;
			box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(105, 105, 105, 0.2);
			border-radius: 4rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item-l{
				margin-left: 30rpx;
				width: 100%;
				.studis{
					display: flex;
					align-items: center;
				}
				.item-beweet{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.item-title{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin: 40rpx 0;
					
				}
				.item-stu{
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					.item-img{
						height: 27rpx;
						width: 30rpx;
					}
					.item-stu-s{
						padding-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.tagteacher{
						margin: 0 10rpx 10rpx 0;
					}
				}
				
			}
			.delete-banji{
				margin-right: 30rpx;
			}
				.r-teacher{
						margin-right: 30rpx;
					width: 130rpx;
					height: 50rpx;
					background: #E89C38;
					border-radius: 25rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F7F7F6;
					
				}
			.item-r{
				margin-right: 20rpx;
				flex-shrink:0;
				align-self:flex-start;
				text-align: right;
				.r-teacher{
					width: 130rpx;
					height: 50rpx;
					background: #E89C38;
					border-radius: 25rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F7F7F6;
					margin-top: 30rpx;
				}
				
			}
		}
	}


	.title-add{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #333333;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 20rpx;
	}


	.wrap {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		height: 70rpx;

		.ban {
			display: flex;
			height: 70rpx;
			align-items: center;

			.keywordgrade {
				width: 150rpx;
				margin-left: 20rpx;

			}

		}

		.addbanij {
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 5rpx;
			background-color: #55aaff;
			color: #fff;
			padding: 0 20rpx;
			border-radius: 20rpx;
		}
	}

	// 弹框
	.showbanji {
		margin: 30rpx 0;
		overflow: hidden;
		.form-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 109rpx;
			border-bottom: 2rpx solid #F1F1F1;
			padding: 0 30rpx;
			.form-item-label{
				display: flex;
				align-items: center;
				.form-img{
					width: 26rpx;
				}
				.form-item-title{
					margin-left: 14rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.submitbanji {
			color: #fff;
			margin: 54rpx 113rpx 68rpx;
			height: 70rpx;
			background: #2165F7;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
		}
		.teacherlist{
			display: flex;
			justify-content: space-between;
			height: 119rpx;
			align-items: center;
			border-bottom: 2rpx solid #F1F1F1;
			.showbanji-l{
				display: flex;
				align-items: center;
				margin-left: 25rpx;
				.showbanji-l-title{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 20rpx;
				}
			}
			.showbanji-r{
				margin-right: 32rpx;
				line-height: 42rpx;
				border: 2rpx solid #E89C38;
				border-radius: 20rpx;
				text-align: center;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #E48A15;
				padding: 0 30rpx;
			}
			.hover{
				background-color: #E89C38;
				color: #fff;
			}
			.showbanji-r-yifen{
				margin-right: 32rpx;
				background: #FFF0DC;
				border-radius: 19rpx;
				color: #E48A15;
				font-size: 22rpx;
				line-height: 48rpx;
				text-align: center;
				padding: 0 26rpx;
			}
		}
	}


	.teacherbody{
		max-height:830rpx;
		overflow-y: scroll;
	}

	
</style>
